<template>
    <div class="goods-list">
        <!-- 商品搜索区域 -->
       <el-form :inline="true" :model="searchData">
        <el-form-item label="商品名称">
            <el-input v-model="searchData.search" placeholder="请输入搜索名称" style="width: 200px;"></el-input>
        </el-form-item>
         
        <!--   filterable 在下拉框中可以输入内容-->
        <el-form-item label="商品分类">
            <el-select
          v-model="searchData.category"
          placeholder="请选择分类"
          filterable
        >
        <!-- TODO 解决问题：下拉框内容刷新不出来的问题 -->
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        </el-form-item>
    <el-form-item>
        <el-button type="primary" @click="onSearch">搜索</el-button>
    </el-form-item>
       
       </el-form>
        <!-- TODO  商品列表 -->
        <el-table :data="goodsData" style="width: 100%">
            <el-table-column type="expand">
                <template #default="scope">
                    <div class="imgs">
                        <span>商品图片</span>
                        <img :src="scope.row.img1" alt="">
                        <img :src="scope.row.img2" alt="">
                        <img :src="scope.row.img3" alt="">
                        <img :src="scope.row.img4" alt="">
                    </div>
                    <p>
                        <span>商品名称：</span>
                        {{ scope.row.proname }}
                    </p>
                    <p>
                        <span>商品描述：</span>
                        {{ scope.row.desc }}
                    </p>
                    <p>
                        <span>商品库存：</span>
                        {{ scope.row.stock }}
                    </p>
                </template>
            </el-table-column>
            <el-table-column type="index" label="序号" />
            <el-table-column prop="img" label="商品图片">
                <!-- template是表格的默认插槽  scope是作用域的意思
            自定义列的内容 作用域参数为 { row, column, $index }
            scope就是这三个参数传过来的值
        -->
                <template #default="scope">
                    <!-- {{ scope.row.img}} -->
                    <!-- 需要加冒号 v-bind 改成动态的 -->
                    <img :src="scope.row.img1" alt="" style="width: 100px;">
                </template>
            </el-table-column>>
            <el-table-column prop="proname" label="商品名称">

            </el-table-column>
            <el-table-column prop="brand" label="品牌" />
            <el-table-column prop="category" label="分类" />
            <el-table-column prop="originprice" label="原价" />
            <el-table-column prop="discount" label="折扣" />
            <el-table-column prop="sales" label="销量" />
            <!-- 是否售卖 -->
            <el-table-column prop="" label="是否售卖">
                <template #default="scope">
                    <!-- 传参的时候做个标记 传参是传当前一行的数据-->
                    <el-switch v-model="scope.row.issaleable" @change="changeGoods(scope.row, 'issale')" />
                </template>
            </el-table-column>
            <!-- 是否秒杀 -->
            <el-table-column prop="" label="是否秒杀">
                <template #default="scope">

                    <el-switch v-model="scope.row.isseckillable" @change="changeGoods(scope.row, 'isseckill')" />
                </template>
            </el-table-column>
            <!-- 是否推荐 -->
            <el-table-column prop="" label="是否推荐">
                <template #default="scope">
                    <el-switch v-model="scope.row.isrecommendable" @change="changeGoods(scope.row, 'isrecommend')" />
                </template>
            </el-table-column>>
            <!-- 操作 -->
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button type="danger">删除</el-button>
                </template>
            </el-table-column>>
        </el-table>
        <!-- 分页条 -->
        <el-pagination v-model:current-page="currentpage" v-model:page-size="pagesize" :page-sizes="pageAll"
            :background="background" layout="total, sizes, prev, pager, next, jumper" :total="total"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        <!-- 
        total 显示总共多少条数据
        sizes 每页多少条
        prev 左边的箭头
        pager  中间的页码
        next 下一页 
        jumper 跳到多少页 
        size-change 改每页的条数时触发
        current-change 改当前的页码
    -->
    </div>
</template>

<script>
import { getGoodsListAPI, changeGoodsAPI ,getGoodsCategoryAPI,getGoodsSearchAPI} from '@/api/goods.js'
// import { ElMessage } from 'element-plus'

export default {
    data() {
        return {
            // 搜索栏
            searchData:{
                // 搜索
                search:'',
                // 分类
                category:''

            },
            // 下拉的数据
            options:[],

            goodsData: [],
            // 页码
            // count: 1,
            // 每页显示的个数
            // limitNum: 10,
            // 分页相关的变量
            // 当前页码
            // 改成动态的 
            currentpage: JSON.parse(sessionStorage.getItem('currentpage')) || 1,
            // 每页显示的数量
            pagesize: parseInt(sessionStorage.getItem('pagesize')) || 10,
            // 设置每页显示多少条的选项 自定义一个
            pageAll: [10, 20, 30, 40, 50],
            background: true,
            total: 0

        }
    },
    methods: {
        loadGoodList() {
            getGoodsListAPI({
                count: this.currentpage,
                limitNum: this.pagesize
            }).then(res => {
                // console.log(res);
                if (res.data.code == 200) {
                    // 修改状态 需要对数据进行二次处理
                    // 遍历对象 item 就是每个对象 然后返回一个新的对象
                    this.goodsData = res.data.data.map((item) => {


                        return {
                            ...item,
                            isrecommendable: item.isrecommend == 1,
                            issaleable: item.issale == 1,
                            isseckillable: item.isseckill == 1

                        }

                    })
                    // 在这个地方可以拿到总共有多少条数据
                    this.total = res.data.total
                }
            })
        },
        // row是触发事件传过来的数据，mark是传过来的标记
        changeGoods(row, mark) {
            // 判断传过来的是哪个 
            // 需要调接口
            // 先定义一个空的
            let type = ''
            let flag = false

            if (mark == 'isrecommend') {
                // type是标记 标记是秒杀还是推荐
                type = 'isrecommend'
                // 自己修改后的值
                // 需要是布尔值 所以把上面经过处理的拿下来
                flag = row.isrecommendable
            } else if (mark == 'isseckill') {
                type = 'isseckill'
                flag = row.isseckillable
            }
            changeGoodsAPI({
                // 需要三个参数
                proid: row.proid,
                // 标记
                type,
                flag,
            })
            // .then(res => {
            //     if (res.data.code == 200) {
            //         // 这种弹窗都会放在拦截器中
            //         ElMessage({
            //             message: '修改成功',
            //             type: 'success',
            //         })
            //     }
            // })
        },
        handleSizeChange(size) {
            // 再改变的时候重新加载商品列表
            this.loadGoodList()
            // 改每页显示多少条的时候就触发  然后存到浏览器中
            sessionStorage.setItem('pagesize', this.pagesize)
        },
        handleCurrentChange(papg) {
            // 再改变的时候重新加载商品列表
            this.loadGoodList()
            sessionStorage.setItem('currentpage', this.currentpage)

        },
        // 先获取商品分类
        loadGoodsCategory(){
            getGoodsCategoryAPI().then(res=>{
                // console.log(res.data.data);
                if(res.data.code == 200){
                    // console.log(1);
                    // 这样数据出不来 所以要处理 去看组件说明文档的内容
                    // this.options = res.data.data
                   this.options = res.data.data
                    .map((item)=>{
                        return{
                            value:item,
                            label:item
                            
                        }
                    })
                }
            })
        },
        // 搜索筛选
        onSearch(){
            getGoodsSearchAPI({
                category:this.searchData.category,
                search:this.searchData.search
            }).then(res=>{
                // console.log(res);
                if(res.data.code == 200){
                    this.goodsData = res.data.data
                }
            })
        }
    },
    created() {
        this.loadGoodList()
        this.loadGoodsCategory()
    }
}
</script>

<style lang="less" scoped>
.goods-list {
    width: 100%;
    height: 100%;
}

.el-pagination {
    margin-top: 5px;
}

.imgs img {
    vertical-align: middle;
    width: 80px;
    margin-right: 20px;
    border-radius: 15px;
}
.el-form {
  margin-top: 20px;
}
</style>